<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myMap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6"></script>
    <script>
         window.onload = function () {
            //创建地图对象
            var myMap = new BMapGL.Map('myMap');
            var initPoint=new BMapGL.Point(104.069944, 30.579012);
            //设置地图的中心点及级别
            myMap.centerAndZoom(initPoint, 15);
            //设置滚轮控制地图级别
            myMap.enableScrollWheelZoom();
            //创建标记
            var marker=new BMapGL.Marker(initPoint);
            //设置标注可拖拽
            marker.enableDragging();
            //将标注添加到地图
            myMap.addOverlay(marker);
            //添加标注的拖拽结束事件
            marker.addEventListener('dragend',function(event){
                // console.log(event.latLng.lng,event.latLng.lat);
                //创建解析对象
                var geo=new BMapGL.Geocoder();
                //地址逆向解析 point->文本地址
                var p=new BMapGL.Point(event.latLng.lng,event.latLng.lat);
                geo.getLocation(p,function(re){
                    // console.log(re.address);
                    // 创建消息框
                    var win=new BMapGL.InfoWindow(re.address,{
                        width:200,
                        height:100,
                        title:'地址:'
                    });
                    //地图打开消息框
                    myMap.openInfoWindow(win,p);
                })
            });
         }
    </script>
</head>
<body>
    <div id="myMap"></div>
</body>
</html>